<template>
  <el-row type="flex" class="meeting" id="meeting">
    <el-col class="content-container">
      <el-row class="title">
        <div class="title-content">
          <el-col class="text">{{ currentMeeting && currentMeeting.meetMode === 'video' ? '视频会商' : '语音会议' }}</el-col>
          <el-col>
            <div class="arrow"></div>
          </el-col>
        </div>
      </el-row>
      <el-row class="main-container">
        <!-- 视频会商 -->
        <el-col class="video-meeting" v-if="currentMeeting && currentMeeting.meetMode === 'video'">
          <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
            <el-tree :data="treeData" :props="videoProps" icon-class="el-icon-arrow-right" node-key="nid"
              @check="nodeCheckChange" highlight-current show-checkbox check-strictly ref="tree">
              <div class="custom-tree-node" slot-scope="{ node, data }" :class="{
                  isDrag:
                    (data.type === 'video' || data.type === 'userVideo') &&
                    data.obj.status !== 'st_leave',
                }" :draggable="draggable(data)" @dragstart="drag($event, node, data)">
                <div class="drag" @touchstart="down($event, node, data)">
                  <img v-if="showNode(node, data)" :class="getClass(data)" />
                  {{ data.label }}
                </div>
              </div>
            </el-tree>
          </el-scrollbar>
        </el-col>
        <!-- 语音会议 -->
        <el-col class="audio-meeting" v-if="currentMeeting && currentMeeting.meetMode === 'audio'">
          <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap">
            <el-tree :data="userGroupTreeData1" icon-class="el-icon-arrow-right" node-key="nid" highlight-current
              ref="tree"></el-tree>
          </el-scrollbar>
          <div class="audio-meeting-footer" @click="groupCall">发起组呼</div>
        </el-col>
        <!-- <div class="footer">发起组呼</div> -->
        <el-col class="meeting-container">
          <div class="play-container">
            <!-- video播放区 -->
            <div v-if="currentMeeting && currentMeeting.meetMode === 'video'" style="height: 100%; width: 100%">
              <video-plate-webrtc ref="video-plate" :operatorCallTels='operatorCallTels' :meeting.sync="currentMeeting"
                @updataTreeNode="updataTreeNode">
              </video-plate-webrtc>
            </div>
            <div v-else-if="currentMeeting && currentMeeting.meetMode === 'audio'" class="audio-member-list">
              <el-scrollbar class="audio-member-scrollbar" wrap-class="audio-member-scrollbar__wrap">
                <div class="member-item-card audio" v-for="(item) in currentMeetingMembers" :key="item.activeDevice">
                  <div class="user-card-clearfix">
                    <el-popover :popper-class="`meeting-popover ${item.activeDevice}`"
                      :ref="`popover-${item.activeDevice}`" trigger="click" placement="bottom">
                      <el-card class="popover-card" shadow="never">
                        <div slot="header">
                          <span class="header-left">{{ item.groupName || '外线' }}</span>
                          <el-divider direction="vertical"></el-divider>
                          <span class="header-right">{{ item.realName }}</span>
                        </div>
                        <div class="popover-card-body">
                          <div class="body-item-tools">
                            <div class="item-tools-left">
                              <div class="item-info-left">{{ item.activeDevice }}</div>
                            </div>
                            <div class="item-tools-right">
                              <div style="width:100%;height: 20px;">
                                <span style="float:left;margin-left:5%">
                                  会议({{
                                  currentMeeting
                                  ? currentMeeting.meetName
                                  : ''
                                  }})
                                </span>
                                <span style="float:right;margin-right:5%">
                                  {{
                                  item.userStatus === 'allowspeak'
                                  ? '自由发言'
                                  : '禁止发言'
                                  }}
                                </span>
                              </div>

                              <div class="tool-item" @click="clearConnection(item)">
                                <div class="icon-div">
                                  <svg-icon icon-class="scissor"></svg-icon>
                                </div>
                                <div class="tool-text">拆线</div>
                              </div>
                              <div class="tool-item" v-if="item.userStatus === 'singletalk'" @click="meetBack(item)">
                                <div class="icon-div">
                                  <svg-icon icon-class="back-meeting"></svg-icon>
                                </div>
                                <div class="tool-text">回到会议</div>
                              </div>
                              <div class="tool-item" @click="meetKick(item)">
                                <div class="icon-div">
                                  <svg-icon icon-class="kick-user"></svg-icon>
                                </div>
                                <div class="tool-text">踢出会议</div>
                              </div>
                              <div class="tool-item" @click="changeUserStatus(item, true)"
                                v-if="item.userStatus !== 'singletalk'">
                                <div class="icon-div">
                                  <svg-icon :icon-class="
                                      item.userStatus === 'allowspeak'
                                        ? 'ban-speak'
                                        : 'allow-speak'
                                    "></svg-icon>
                                </div>
                                <div class="tool-text">
                                  {{
                                  item.userStatus === 'allowspeak'
                                  ? '禁止发言'
                                  : '允许发言'
                                  }}
                                </div>
                              </div>
                              <div class="tool-item" @click="singleTalk(item)" v-if="item.userStatus !== 'singletalk'">
                                <div class="icon-div">
                                  <svg-icon icon-class="single-talk"></svg-icon>
                                </div>
                                <div class="tool-text">单独通话</div>
                              </div>
                            </div>
                          </div>
                          <div class="body-item-footer"></div>
                        </div>
                      </el-card>
                      <div class="user-img" :class="item.userStatus" slot="reference"
                        @click="getUserInfoByTel(item, index)" />
                    </el-popover>
                    <div class="user-info" @click.stop="changeUserStatus(item)">
                      <div class="user-name">{{ item.realName }}</div>
                      <div class="user-phone">{{ item.activeDevice }}</div>
                    </div>
                  </div>
                  <div class="user-card-footer" @click.stop="changeUserStatus(item)">{{ userStatusTag(item) }}</div>
                </div>
              </el-scrollbar>
            </div>
            <!-- 拨号盘 -->
            <dial v-if="openDial" :meeting="currentMeeting" :open.sync="openDial"
              @setWebrtcCostumEvent="setWebrtcCostumEvent"></dial>
            <!-- 添加成员弹出框 -->
            <contact v-if="openContact" :meeting="currentMeeting" :open.sync="openContact"
              @setWebrtcCostumEvent="setWebrtcCostumEvent"></contact>
          </div>
          <div class="meeting-list">
            <div class="meeting-list-header" @click="handleCollapse">
              <span class="left">会场列表({{ meetingList.length }})</span>
              <svg-icon :icon-class="showMeetingList ? 'd-arrow-down' : 'd-arrow-top'"></svg-icon>
            </div>
            <div class="meeting-list-body" v-if="showMeetingList">
              <div class="arrow-offset" @click="offset('left')">
                <svg-icon icon-class="arrow-left"></svg-icon>
              </div>
              <div id="scroll_div" class="scroll_div">
                <div id="scroll_box" class="scroll_box">
                  <div class="box-item" v-for="item in meetingList" :key="item.meetID">
                    <div class="right-top"></div>
                    <svg-icon class="right-top-delete" icon-class="delete" @click.stop="deleteMeeting(item)"></svg-icon>
                    <div class="box-item-inner meeting" :class="{
                        isSelected:
                          currentMeeting &&
                          currentMeeting.meetID === item.meetID,
                      }" @click.stop="selectMeeting(item)">
                      <svg-icon icon-class="meeting-board"></svg-icon>
                      <h3>{{ item.meetName }}</h3>
                      <h3>
                        {{
                        item.meetMode === 'video' ? '视频会议' : '语音会议'
                        }}({{ item.ownName }})
                      </h3>
                      <h3>会议人数：{{ item.memberLength || 0 }}人</h3>
                    </div>
                  </div>
                  <div class="box-item" @click="addMeeting()">
                    <div class="box-item-inner add">
                      <svg-icon icon-class="add"></svg-icon>
                      <h3>添加新会议</h3>
                    </div>
                  </div>
                </div>
              </div>
              <div class="arrow-offset" @click="offset('right')">
                <svg-icon icon-class="arrow-right"></svg-icon>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col class="tools-container">
      <div class="header-title">
        <div class="header">会议操作区</div>
        <el-row class="blank"></el-row>
      </div>
      <el-row class="tools">
        <el-link :underline="false" @click="joinMeeting">
          <svg-icon icon-class="dial" />
          <div class="label">拨号</div>
        </el-link>
        <el-link :underline="false" @click="addUser">
          <svg-icon icon-class="add-user" />
          <div class="label">添加</div>
        </el-link>
        <el-link :underline="false" @click="meetLock()">
          <svg-icon :icon-class="
              currentMeeting && currentMeeting.isLocked === 'yes'
                ? 'lock'
                : 'unlock'
            " />
          <div class="label">锁定</div>
        </el-link>
        <el-link :underline="false" @click="meetRecord">
          <svg-icon :icon-class="
              currentMeeting && currentMeeting.isRecord === 'yes'
                ? 'unrecord'
                : 'record'
            " />
          <div class="label">录音</div>
        </el-link>
        <el-link :underline="false" @click="meetBroadcast">
          <svg-icon :icon-class="
              currentMeeting && currentMeeting.isBroadcast === 'yes'
                ? 'broadcast-close'
                : 'broadcast'
            " />
          <div class="label">广播</div>
        </el-link>
        <el-link :underline="false" @click="meetAllowSpeak">
          <svg-icon icon-class="allow-speak" />
          <div class="label">发言</div>
        </el-link>
        <el-link :underline="false" @click="meetBanSpeak">
          <svg-icon icon-class="ban-speak" />
          <div class="label">禁言</div>
        </el-link>
        <el-link :underline="false" @click="closeMeeting">
          <svg-icon icon-class="del-user" />
          <div class="label">关闭</div>
        </el-link>
        <el-link :underline="false" @click="editMeeting">
          <svg-icon icon-class="edit" />
          <div class="label">编辑</div>
        </el-link>
      </el-row>
      <el-row class="member-list" v-if="currentMeeting && currentMeeting.meetMode === 'video'">
        <el-scrollbar class="member-scrollbar">
          <div class="member-item-card video" v-for="(item, index) in currentMeetingMembers" :key="item.activeDevice">
            <div class="user-card-clearfix">
              <el-popover :popper-class="`meeting-popover ${item.activeDevice}`" :ref="`popover-${item.activeDevice}`"
                trigger="click" placement="left">
                <el-card class="popover-card" shadow="never">
                  <div slot="header">
                    <span class="header-left">{{ item.groupName || '外线' }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="header-right">{{ item.realName }}</span>
                  </div>
                  <div class="popover-card-body">
                    <div class="body-item-info">
                      <span class="item-info-left">{{ item.activeDevice }}</span>
                      <span class="item-info-midle">
                        会议({{
                        currentMeeting ? currentMeeting.meetName : ''
                        }})
                      </span>
                      <span class="item-info-right">
                        {{
                        item.userStatus === 'allowspeak'
                        ? '自由发言'
                        : '禁止发言'
                        }}
                      </span>
                    </div>
                    <div class="body-item-tools">
                      <div class="item-tools-left"></div>
                      <div class="item-tools-right">
                        <div class="tool-item" @click="clearConnection(item)">
                          <div class="icon-div">
                            <svg-icon icon-class="scissor"></svg-icon>
                          </div>
                          <div class="tool-text">拆线</div>
                        </div>
                        <div class="tool-item" v-if="item.userStatus === 'singletalk'" @click="meetBack(item)">
                          <div class="icon-div">
                            <svg-icon icon-class="back-meeting"></svg-icon>
                          </div>
                          <div class="tool-text">回到会议</div>
                        </div>
                        <div class="tool-item" @click="meetKick(item)">
                          <div class="icon-div">
                            <svg-icon icon-class="kick-user"></svg-icon>
                          </div>
                          <div class="tool-text">踢出会议</div>
                        </div>
                        <div class="tool-item" @click="changeUserStatus(item, true)"
                          v-if="item.userStatus !== 'singletalk'">
                          <div class="icon-div">
                            <svg-icon :icon-class="
                                item.userStatus === 'allowspeak'
                                  ? 'ban-speak'
                                  : 'allow-speak'
                              "></svg-icon>
                          </div>
                          <div class="tool-text">
                            {{
                            item.userStatus === 'allowspeak'
                            ? '禁止发言'
                            : '允许发言'
                            }}
                          </div>
                        </div>
                        <div class="tool-item" @click="singleTalk(item)" v-if="item.userStatus !== 'singletalk'">
                          <div class="icon-div">
                            <svg-icon icon-class="single-talk"></svg-icon>
                          </div>
                          <div class="tool-text">单独通话</div>
                        </div>
                      </div>
                    </div>
                    <div class="body-item-footer">
                      <a href="#" @click="editUser(item)">编辑</a>
                    </div>
                  </div>
                </el-card>
                <div class="user-img" :class="item.userStatus" slot="reference"
                  @click="getUserInfoByTel(item, index)" />
              </el-popover>
              <div class="user-info" @click.stop="changeUserStatus(item)">
                <div class="user-name">{{ item.realName }}</div>
                <div class="user-phone">{{ item.activeDevice }}</div>
              </div>
            </div>
            <div class="user-card-footer" @click.stop="changeUserStatus(item)">{{ userStatusTag(item) }}</div>
          </div>
        </el-scrollbar>
      </el-row>
    </el-col>
    <!-- 创建或修改会议 -->
    <meeting-form v-if="openMeetingForm" :title="openTitle" :form="meetingForm" :open.sync="openMeetingForm">
    </meeting-form>
    <!-- 广播弹出窗 -->
    <broadcast-form ref="broadcast-form" v-if="openBroadcastForm" :meeting="currentMeeting"
      :open.sync="openBroadcastForm"></broadcast-form>

    <!-- 视频分发窗口 -->
    <distribution v-if="openDistribution" :open.sync="openDistribution" :source="distributionSource"></distribution>

    <!-- 摄像头视频 -->
    <camara-box v-if="showCamaraBox && (!currentMeeting || currentMeeting.meetMode === 'audio')" ref="camaraBox"
      :open.sync="showCamaraBox" :formData="camaraBoxData" containerId="meeting" module="meeting"
      :playingData="camaraBoxPlayingData" @makeCall="makeCall" @videoDistribution="openVideoDistribution"></camara-box>
  </el-row>
</template>

<script>
import deepClone from '@/utils/clone'
import { mapGetters } from 'vuex'

import Drag from '@/utils/videoDrag'

import MeetingForm from './MeetingForm'
import Dial from './Dial'
import Contact from './Contact'
import VideoPlateWebrtc from './VideoPlateWebrtc'
import BroadcastForm from './BroadcastForm'
import CamaraBox from '@/components/Gis/CamaraBox'
import Distribution from '@/components/Meeting/Distribution'

import Webrtc2Sip from '@/utils/Webrtc2Sip'
import { isSupportedShim } from '@/utils/microsys'
export default {
  data() {
    return {
      ws: undefined,
      list: [],
      total: 0, // 会议总数
      title: '语音会议',
      // 折叠会议列表
      showMeetingList: false,
      meetingList: [],
      currentMeeting: null,
      isSingleTalk: false, // 是否单独通话
      currentMeetingMembers: [],

      // userGroupTreeData1: [], // 语音会议组织树
      // 摄像头树节点
      treeData: [
        {
          label: '视频文件',
          nid: 'meetingcameraroot',
          children: [],
          type: 'videogroup',
        },
        {
          label: '会议视频',
          nid: 'meetingvideoroot',
          children: [],
          type: 'videogroup',
        },
      ],
      videoProps: {
        children: 'children',
        disabled: (data, node) => {
          if (data.type === 'videogroup' || data.type === 'userLinkedVideo') {
            node.isLeaf = false
            return false
          }
          node.isLeaf = true
          return data.obj.status && data.obj.status === 'st_leave'
        },
      },

      openMeetingForm: false, // 打开meetingForm
      openTitle: '', // 打开弹出框的标题
      meetingForm: undefined,
      openDial: false, // 打开拨号盘
      openContact: false, // 打开添加成员
      openBroadcastForm: false, // 打开广播弹出窗

      treeClickCount: 0, // 单击次数
      treeClickTimer: null, //定时器

      /**
       * 摄像头播放
       */
      camaraBoxData: [], // 选中的视频列表
      camaraBoxPlayingData: [], // 正在播放的视频
      showCamaraBox: false, // 显示播放窗口

      /**
       * 视频分发
       */
      openDistribution: false, // 打开视频分发接口
      distributionSource: {}, // 视频源
    }
  },

  activated() {
    this.init()
  },
  computed: {
    ...mapGetters([
      'videoTreeData',
      'userGroupTreeData',
      'operatorInfo',
      'operatorCallTels',
      'telEmployeeMap',
      'telOperatorMap',
      'deviceStatusMap',
      'groupMap',
      'videoMap',
      'id2nidMap',
    ]),
    userGroupTreeData1() {
      return this.fiterUserGroupTreeData()
    },
  },
  watch: {
    videoTreeData(val) {
      // console.log("watch videoTreeData", val)
      this.treeGroup()
    },
    userGroupTreeData(val) {
      this.fiterUserGroupTreeData()
    },
  },
  methods: {
    // 轮询回调事件
    event(e) {
      // console.log('meeting 轮询回调事件', e.type, e)
      switch (e.type) {
        case 'LinkVideoOpen': // 打开联动摄像头
          this.handleLinkVideo(e)
          break
        case 'LinkVideoClose': // 关闭联动摄像头
          this.handleLinkVideoClose(e)
        case 'MeetStatusEvent':
          this.meetStatusHandler(e)
          break
        case 'CreateMeet':
          if (e.result === 'fail') this.msgError('创建会议失败')
          break
        case 'UserStatus':
          this.updataUserStatus(e)
          break
        case 'meet_member_event':
          this.meetMemberHandler(e)
          break
        case 'StartVideoDispense':
          if (this.currentMeeting.meetMode === 'video') {
            this.$refs['video-plate'].event(e)
          }
          break
        case 'VoiceFileListen':
          this.$refs['broadcast-form'].event(e)
          break
        case 'SelectCall':
          if (e.result === 'fail' || e.eventdata.calledResult === 'fail') {
            e.eventdata.calledDevice
              ? this.msgError(`${e.eventdata.calledDevice} 加入会议失败`)
              : this.msgError(`加入会议失败, ${e.reason}`)
          }
          break
        default:
          break
      }
    },
    // 打开联动摄像头
    handleLinkVideo(e) {
      // console.error('LinkVideoOpen 会议', JSON.stringify(e))
      let nids = this.id2nidMap.get(e.videoID)
      if (!nids) {
        msgError('联动摄像头不存在')
        return
      }

      let link = {
        url: '',
        status: 'open',
        type: 'LinkVideoOpen',
        videoMode: '2',
        videoID: '44c6d70dface55558ebbe9b3037b1935',
      }
      let video = this.videoMap.get(e.videoID)
      if (video) {
        let node = {
          obj: video,
          type: 'video',
          label: video.videoName,
          id: video.videoID,
          nid: nids[0],
        }
        if (this.currentMeeting && this.currentMeeting.meetMode === 'video') {
          return
        } else {
          this.camaraBoxPlayingData = []
          this.camaraBoxData = [node]
          this.showCamaraBox = true
        }
      }
    },
    // 关闭联动摄像头
    handleLinkVideoClose(e) {
      let ref = this.$refs.camaraBox
      if (ref) {
        ref.videoExit('', e.videoID)
      }
    },
    // 是否可拖拽
    draggable(data) {
      if (
        data.type === 'videogroup' ||
        data.type === 'userLinkedVideo' ||
        data.obj.status === 'st_leave'
      ) {
        return false
      }
      return true
    },
    // 对数据进行过滤
    fiterUserGroupTreeData() {
      const convert = (arr) => {
        const newArr = arr.filter(
          (item) =>
            item.obj.groupType !== 'clustergroup' &&
            item.obj.groupType !== 'dynamicgroup'
        )
        return newArr.map((item) => {
          if (item.children) {
            item.children = convert(item.children)
          }
          return item
        })
      }
      return convert(deepClone(this.userGroupTreeData))
    },
    // 实现移动端拖拽
    down(event, node, data) {
      event.preventDefault()
      event.stopPropagation()
      if (event.target.tagName === 'IMG') {
        return false
      }
      if (data.type === 'videogroup') return
      new Drag(
        {
          dragEle: event.target,
          targetEle: document.getElementById('video-body'),
          ondrop: (touch, index) => {
            index === 'Mix'
              ? this.$refs['video-plate'].dropMix(touch, data)
              : this.$refs['video-plate'].drop(touch, index, data)
          },
        },
        event,
        this.$refs['video-plate'].hiddenVideos
      )
    },
    handleNodeClick(data, node) {
      if (data.type === 'videogroup') {
        this.treeClickCount = 0
        return
      }
      //记录点击次数
      this.treeClickCount++
      //单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
      if (this.treeClickCount >= 2) {
        return
      }
      //计时器,计算300毫秒为单位,可自行修改
      this.treeClickTimer = setTimeout(() => {
        if (this.treeClickCount == 1) {
          //把次数归零
          this.treeClickCount = 0
          //单击事件处理
          return
        } else if (this.treeClickCount > 1) {
          //把次数归零
          this.treeClickCount = 0
          //双击事件
          console.log('双击事件,可在此处理对应逻辑')
        }
      }, 300)
    },

    /**
     * 设置自定义事件
     */
    setWebrtcCostumEvent(activeDevice) {
      let webrtc2Sip = Webrtc2Sip.getWebrtc2SipByName(activeDevice)
      if (webrtc2Sip)
        webrtc2Sip.setCustomEvent(this.sessionEvent, this.stackEvent)
    },
    // sip栈事件 -- 来电等事件
    stackEvent(e, webrtc2Sip) {
      console.log('meeting stackEvent', e.type, e.description)
      if (e.type === 'i_new_call') {
        // Webrtc2Sip.globalStackEvent(e, webrtc2Sip);
        webrtc2Sip.sipAnswer()
      }
    },
    // 会话事件 -- 挂断等
    sessionEvent(e, sessionType, webrtc2Sip) {
      console.log('meeting sessionEvent', e.type, e.description)
      if (e.type === 'terminating' || e.type === 'terminated') {
        // Webrtc2Sip.globalSessionEvent(e, webrtc2Sip);
        webrtc2Sip.sipHangUp()
        // 清除Webrtc2Sip自定义事件
        webrtc2Sip.clearCustomEvent()
      }
    },
    // 根据号码获取用户状态
    deviceStatus(obj) {
      let status = this.deviceStatusMap.get(obj.user)
      console.log('deviceStatus', obj.user, status)
      return status ? status : 'online'
    },
    // 会议状态处理
    meetStatusHandler(e) {
      // console.log('meetStatusHandler', e.type, e)
      if (e.meetMode === 'monitor') return
      if (e.event === 'NewMeet') {
        // 新建会议
        if (
          this.meetingList.find((item) => item.meetID === e.meetID) ===
          undefined
        ) {
          this.meetingList.push(e)
        }
      } else if (e.event === 'ModMeet') {
        // 修改会议
        let index = this.meetingList.findIndex(
          (item) => item.meetID === e.meetID
        )
        if (index !== -1) {
          let old = this.meetingList[index]
          e.ownName = old.ownName
          e.memberLength = old.memberLength
          console.log('ModMeet memberLength', e.memberLength)
          this.$set(this.meetingList, index, e)
          if (this.currentMeeting && this.currentMeeting.meetID === e.meetID) {
            this.currentMeeting = e
            sessionStorage.setItem('currentMeeting', JSON.stringify(e))
            if (old.meetMode === 'video' && old.rtspUrl !== e.rtspUrl) {
              let ref = this.$refs['video-plate']
              if (ref) ref.closeMix()
              else {
                sessionStorage.removeItem('meetingMixSources-' + old.meetID)
              }
            }
          }
        }
      } else if (e.event === 'DelMeet') {
        // 删除会议
        let index
        if (
          (index = this.meetingList.findIndex(
            (item) => item.meetID === e.meetID
          )) !== -1
        ) {
          this.$delete(this.meetingList, index)
        }
      }
    },
    // 会议成员处理
    meetMemberHandler(e) {
      if (!this.currentMeeting || this.currentMeeting.meetID !== e.meetID)
        return
      if (e.event === 'NewMeetMember') {
        // 新加入成员
        // console.error('会议成员处理 NewMeetMember', JSON.stringify(e))
        if (
          this.currentMeetingMembers.find(
            (item) => item.activeDevice === e.user
          ) === undefined
        ) {
          let info =
            this.telOperatorMap.get(e.user) || this.telEmployeeMap.get(e.user)
          if (info) {
            e.groupName = this.getGroupName(info)
            e.realName = info.realName
          } else {
            e.groupName = '外线'
            e.realName = e.userName || e.user
          }

          e.activeDevice = e.user
          e.userStatus = e.device_status
          this.currentMeetingMembers.push(e)
          this.currentMeeting.memberLength = this.currentMeetingMembers.length
          if (this.currentMeeting.meetMode === 'video') {
            let isFirst =
              sessionStorage.getItem('meetingStarted-' + e.meetID) !== 'true' ||
              false
            isFirst &&
              sessionStorage.setItem('meetingStarted-' + e.meetID, true)
            console.log('meetMemberHandler isFirst', isFirst)
            if (!this.$refs.tree.getNode(e.user)) {
              // 用于判断是否是视频话机，结果事件有rtsp流时，认为是视频话机
              this.dealUserVideoUrl(e, info, true, isFirst)
            }
          }
        }
      } else if (e.event === 'ModMeetMember') {
        // 修改成员
        let index = this.currentMeetingMembers.findIndex(
          (item) => item.activeDevice === e.user
        )
        if (index !== -1) {
          let old = this.meetingList[index]
          e.groupName = old.groupName
          e.realName = old.realName
          e.userStatus = e.device_status
          this.$set(this.currentMeetingMembers, index, e)
        }
      } else if (e.event === 'DelMeetMember') {
        // 删除成员
        let index
        if (
          (index = this.currentMeetingMembers.findIndex(
            (item) => item.activeDevice === e.user
          )) !== -1
        ) {
          this.$delete(this.currentMeetingMembers, index)
          if (this.currentMeetingMembers.length === 0) {
            sessionStorage.setItem('meetingStarted-' + e.meetID, false)
          }

          this.currentMeeting.memberLength = this.currentMeetingMembers.length
          if (this.currentMeeting.meetMode === 'video') {
            let node = this.$refs.tree.getNode(e.user)
            if (node) {
              this.$refs.tree.remove(node)
            }
          }
        }
      }
      if (this.currentMeeting.meetMode === 'video') {
        this.$refs['video-plate'].event(e)
      }
    },
    // 加入会议
    makeCall(data) {
      if (!this.currentMeeting) {
        msgError('请先选择会议')
        return
      }
      // 添加主叫号码
      var calling = sessionStorage.getItem(
        'meetingCalling-' + this.meeting.meetID
      )
      if (!calling) {
        if (!this.operatorCallTels) return msgError('操作员号码不可达')
        calling = this.operatorCallTels[0]
        sessionStorage.setItem('meetingCalling-' + this.meeting.meetID, calling)
      }
      let telStatus, tel
      if (data.type === 'operator') {
        tel = data.obj.mainTel || data.obj.viceTel
        if (!tel) return msgError(`${data.label}没有手柄号码`)
        if (this.operatorCallTels.includes(tel))
          return msgError('主被叫号码相同')
        telStatus = this.deviceStatusMap.get(tel)
        if (telStatus === 'offline') {
          msgError(`操作员手柄${tel}不在线`)
          return
        }
      } else if (data.type === 'employee') {
        tel = data.obj.defaultNo
        if (!tel) return msgError(`${data.label}默认号码不存在`)
        telStatus = this.deviceStatusMap.get(tel)
        if (telStatus === 'offline') {
          msgError(`${tel}号码不在线`)
          return
        }
      }

      if (
        this.currentMeetingMembers.findIndex(
          (item) => item.activeDevice === tel
        ) !== -1
      ) {
        return msgError(`${data.obj.realName || tel}已在会议中`)
      }

      this.$store.commit('callFlagEvent', true) // vuex缓存
      SDK.meetingCall(this.currentMeeting.meetID, [tel], calling)
        .then((res) => {
          this.loading = false
          this.handleClose()
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
          this.$store.commit('callFlagEvent', false) // vuex缓存
        })
    },
    // 打开视频分发窗口
    openVideoDistribution(data) {
      console.log('视频分发')
      this.distributionSource = data
      this.openDistribution = true
    },
    // 获取组名
    getGroupName(data) {
      let pNode
      if (this.groupMap !== null) {
        let groupID = data.operatorID
          ? data.groupID
          : data.group
          ? data.group[0].groupID
          : ''
        if (!groupID) return ''
        pNode = this.groupMap.get(groupID)
      }
      return pNode ? pNode.label : ''
    },
    // 是否支持webrtc播放
    isSupportedWebrtc() {
      return isSupportedShim()
    },
    // 通过号码获取用户信息
    getUserInfoByTel(user, index) {
      let info =
        this.telOperatorMap.get(user.activeDevice) ||
        this.telEmployeeMap.get(user.activeDevice)
      if (info) {
        user.groupName = this.getGroupName(info)
        user.realName = info.realName
      }
      this.$set(this.currentMeetingMembers, index, user)
    },
    //发起组呼
    groupCall() {
      let node = this.$refs.tree.getCurrentNode()
      if (!node) {
        return this.msgError('请选择组')
      }
      if (!this.operatorCallTels) return this.msgError(`操作员号码不可达`)
      let calling = sessionStorage.getItem(
        'meetingCalling-' + this.currentMeeting.meetID
      )
      if (!calling) calling = this.operatorCallTels[0]
      let telStatus = this.deviceStatusMap.get(calling)
      if (telStatus === 'offline') {
        this.msgError('操作员手柄不在线')
        return
      }
      SDK.groupCall(
        this.currentMeeting.meetID,
        node.obj.groupID,
        calling || this.operatorCallTels[0]
      )
      this.$store.commit('callFlagEvent', true) // vuex缓存
    },
    // 显示内容
    showNode(node, data) {
      if (data.type === 'videogroup' || data.type === 'userLinkedVideo') {
        node.isLeaf = false
        return false
      }
      return true
    },
    getClass(data) {
      if (data.type === 'videogroup' || data.type === 'userLinkedVideo') {
        return ''
      }
      if (data.obj.status === 'st_online') return 'video-online'
      if (data.obj.status === 'st_leave') return 'video-offline'
      if (data.obj.status === 'st_playing') return 'video-playing'
      return ''
    },
    // 播放视频，更新树节点状态
    updataTreeNode({ nid, isPlaying, checked }) {
      this.$nextTick(() => {
        const node = this.$refs.tree.getNode(nid)
        if (node) {
          let data = node.data.obj
          if (checked !== undefined) node.checked = checked
          if (isPlaying !== undefined)
            data.status = isPlaying ? 'st_playing' : 'st_online'
        }
      })
    },
    // 树节点拖拽
    drag(e, node, data) {
      if (data.type === 'video' && data.obj.status === 'st_leave') {
        this.msgError('不能播放离线摄像头')
        return false
      }
      // 设置当前节点
      this.$refs.tree.setCurrentKey(data.nid)
      // 事件传送数据，只能传字符串
      e.dataTransfer.setData('nodeData', JSON.stringify(data))
    },
    // 处理用户视频 第一次时需要默认混码主叫（如果为视频话机）
    dealUserVideoUrl(user, info, isPlay, isFirst) {
      let hasLinked = false
      let pnid
      if (info) {
        // 有关联摄像头
        if (info.videoID && info.videoID.length > 0) {
          hasLinked = true
          pnid = `${info.realName}|${user.activeDevice}`
          let node = {
            label: info.realName,
            nid: pnid,
            parentID: 'meetingvideoroot',
            type: 'userLinkedVideo',
            children: [],
            obj: {},
          }
          this.$refs.tree.append(node, 'meetingvideoroot')
          let children = []
          info.videoID.forEach((videoID) => {
            let video = this.videoMap.get(videoID)
            if (video) {
              let node = {
                label: video.videoName,
                nid: videoID,
                parentID: pnid,
                type: 'video',
                obj: video,
              }
              this.$refs.tree.append(node, pnid)
              this.$nextTick(() => {
                let { isChecked, playing } = this.$refs[
                  'video-plate'
                ].getPlayStatus(videoID)
                let node = this.$refs.tree.getNode(videoID)
                if (isChecked) node.checked = true
                if (playing) node.data.obj.status = 'st_playing'
              })
              if (isPlay && this.currentMeeting.meetMode === 'video') {
                this.$refs['video-plate'].openLinkedVideo(node)
              }
            }
          })
        }
      }
      SDK.userVideo(user.activeDevice)
        .then((res) => {
          if (res.rtspUrl) {
            let rtspUrl = res.rtspUrl
            user.rtspUrl = res.rtspUrl
            if (user && !this.$refs.tree.getNode(user.activeDevice)) {
              var status = 'st_online'
              if (user.userStatus === 'offline') {
                status = 'st_leave'
              }
              let obj = {
                videoID: user.activeDevice,
                activeDevice: user.activeDevice,
                rtspUrl: rtspUrl,
                status: status,
              }
              pnid = hasLinked ? pnid : 'meetingvideoroot'
              let node = {
                label: user.realName,
                nid: user.activeDevice,
                id: user.activeDevice,
                parentID: pnid,
                type: 'userVideo',
                obj,
              }
              this.$refs.tree.append(node, pnid)
              this.$nextTick(() => {
                let { isChecked, playing } = this.$refs[
                  'video-plate'
                ].getPlayStatus(user.activeDevice)
                let node = this.$refs.tree.getNode(user.activeDevice)
                if (isChecked) node.checked = true
                if (playing) node.data.obj.status = 'st_playing'
              })
              if (isPlay && this.currentMeeting.meetMode === 'video') {
                this.$refs['video-plate'].playMemberVideo(
                  undefined,
                  obj,
                  isFirst
                )
              }
            }
          }
        })
        .catch((err) => {
          console.log('获取用户通话图像失败', user.activeDevice, err)
        })
    },
    // 更新成员状态
    updataUserStatus(user) {
      if (user.meetID === this.currentMeeting.meetID) {
        for (var i = 0; i < this.currentMeetingMembers.length; i++) {
          if (this.currentMeetingMembers[i].activeDevice === user.deviceTel) {
            var temp = this.currentMeetingMembers[i]
            temp.userStatus = user.deviceStatus
            this.$set(this.currentMeetingMembers, i, temp)
            if (
              user.deviceStatus === 'singletalk' &&
              this.currentMeeting.meetMode === 'video'
            ) {
              SDK.getMeetingMember(user.meetID).then((res) => {
                console.log('singletalk getMeetingMember', res)
              })

              this.$refs.tree.setChecked(user.deviceTel, false)
              let ref = this.$refs['video-plate']
              if (ref) {
                ref.delMixResourceNoMix(user.deviceTel, user.meetID)
              } else {
                if (
                  sessionStorage.getItem('meetingMixSources-' + user.meetID)
                ) {
                  let meetingMixSources = JSON.parse(
                    sessionStorage.getItem('meetingMixSources-' + user.meetID)
                  )
                  let index = meetingMixSources.sources.findIndex(
                    (item) =>
                      item.calledDevice && item.calledDevice === user.deviceTel
                  )
                  if (index !== -1) {
                    meetingMixSources.sources[index] = {}
                    sessionStorage.setItem(
                      'meetingMixSources-' + user.meetID,
                      JSON.stringify(meetingMixSources)
                    )
                  }
                }
              }
            }
            break
          }
        }
      }
    },
    // 获取会议成员
    async getMeetingMember(meetID, isPlay = false) {
      if (!this.currentMeeting) return
      if (meetID && meetID !== this.currentMeeting.meetID) return
      if (!meetID && this.currentMeeting) meetID = this.currentMeeting.meetID
      if (meetID) {
        await SDK.getMeetingMember(meetID).then((res) => {
          this.currentMeetingMembers = res.meet_list
          this.currentMeeting.memberLength = res.meet_list.length

          this.isSingleTalk = false
          this.currentMeetingMembers.forEach((user) => {
            let info =
              this.telOperatorMap.get(user.activeDevice) ||
              this.telEmployeeMap.get(user.activeDevice)
            if (info) {
              user.groupName = this.getGroupName(info)
              user.realName = info.realName
            } else {
              user.groupName = ''
              user.realName = user.userName || user.user || ''
            }
            if (user.userStatus === 'singletalk') this.isSingleTalk = true
            if (this.currentMeeting.meetMode === 'video') {
              if (!this.$refs.tree.getNode(user.activeDevice)) {
                // 用于判断是否是视频话机，结果事件有rtsp流时，认为是视频话机

                this.dealUserVideoUrl(user, info, isPlay)
              }
            }
          })

          if (this.currentMeeting.meetMode === 'video') {
            if (this.currentMeetingMembers.length > 0) {
              sessionStorage.setItem('meetingStarted-' + meetID, true)
              this.$refs['video-plate'].initData(this.currentMeetingMembers)
            } else {
              this.closeMeeting()
              return
            }
          }
        })
      }
    },
    // 用户状态标签
    userStatusTag(user) {
      if (user.userStatus === 'allowspeak') return '自由发言'
      if (user.userStatus === 'banspeak') return '禁止发言'
      if (user.userStatus === 'singletalk') return '单独通话'
    },
    // 拆线
    clearConnection(user) {
      this.hidePopper(user)
      SDK.clearConnection(user.activeDevice)
    },
    // 踢出会议
    meetKick(user) {
      this.hidePopper(user)
      if (this.currentMeeting.isLocked !== 'yes') {
        if (this.currentMeetingMembers.length <= 1) {
          this.closeMeeting()
        } else {
          SDK.meetKick(user.meetID, user.activeDevice)
        }
      } else {
        this.msgError('会议已锁定，禁止踢出会议')
      }
    },
    // 回到会议
    meetBack(user) {
      this.hidePopper(user)
      SDK.meetBack(user.meetID, user.activeDevice).then(
        (res) => (this.isSingleTalk = false)
      )
    },
    // 单独通话
    singleTalk(user) {
      this.hidePopper(user)
      if (!this.operatorCallTels) return this.msgError(`操作员号码不可达`)
      if (this.operatorCallTels.includes(user.activeDevice)) {
        this.msgError('主被叫相同')
        return
      }
      let calling = sessionStorage.getItem('meetingCalling-' + user.meetID)
      if (!calling) calling = this.operatorCallTels[0]
      SDK.meetSingleTalk(user.meetID, calling, user.activeDevice)
        .then((res) => {
          this.isSingleTalk = true
          // let ref = this.$refs['video-plate']
          // if (ref) ref.closeMix()
        })
        .catch((err) => (this.isSingleTalk = false))
    },
    // 隐藏成员工具栏
    hidePopper(user) {
      try {
        this.$refs[`popover-${user.activeDevice}`][0].doClose()
      } catch (error) {}
    },
    // 编辑会议成员
    editUser(user) {
      this.$message('editUser--' + user.userName)
    },
    // 打开广播表单窗口
    meetBroadcast() {
      if (this.currentMeeting) {
        if (this.currentMeeting.isBroadcast === 'yes') {
          SDK.meetBroadcast(this.currentMeeting.meetID, 'no').then((res) => {
            this.currentMeeting.isBroadcast = 'no'
          })
        } else {
          this.openBroadcastForm = true
        }
      }
    },
    // 拨号加入按钮
    joinMeeting() {
      this.openDial = true
    },
    // 添加成员按钮
    addUser() {
      // console.log("addUser");
      this.openTitle = '添加成员'
      this.openContact = true
    },
    // 添加会议按钮
    addMeeting() {
      console.log('addMeeting')
      this.openTitle = '新建会议'
      if (this.currentMeeting)
        this.meetingForm = {
          meetMode: this.currentMeeting.meetMode,
          isAllowSpeak: 'yes',
        }
      else this.meetingForm = undefined
      this.openMeetingForm = true
    },
    // 编辑会议
    editMeeting() {
      if (!this.currentMeeting) {
        this.msgError('请先选择会议')
        return
      }
      this.openTitle = '修改会议'
      this.meetingForm = this.currentMeeting
      this.openMeetingForm = true
    },
    // 会议允许发言
    meetAllowSpeak() {
      // this.currentMeetingMembers.forEach(
      //   (item) => (item.userStatus = 'allowspeak')
      // );
      SDK.meetAllowSpeak(this.currentMeeting.meetID)
    },
    // 会议禁止发言
    meetBanSpeak() {
      // this.currentMeetingMembers.forEach(
      //   // (item) => (item.userStatus = 'banspeak')
      // );
      SDK.meetBanSpeak(this.currentMeeting.meetID)
    },
    // 改变成员状态
    changeUserStatus(member, hidePopper) {
      if (hidePopper) this.hidePopper(member)
      if (member.userStatus === 'allowspeak') {
        member.userStatus = 'banspeak'
        SDK.meetBanSpeak(member.meetID, member.activeDevice)
      } else if (member.userStatus === 'banspeak') {
        member.userStatus = 'allowspeak'
        SDK.meetAllowSpeak(member.meetID, member.activeDevice)
      } else if (member.userStatus === 'singletalk') {
        SDK.meetBack(member.meetID, member.activeDevice)
      }
    },
    // 会议录音
    meetRecord() {
      var isRecord = this.currentMeeting.isRecord === 'yes' ? 'no' : 'yes'
      SDK.meetRecord(this.currentMeeting.meetID, isRecord).then((res) => {})
    },
    // 会议锁定
    meetLock() {
      SDK.meetLock(
        this.currentMeeting.meetID,
        this.currentMeeting.isLocked === 'yes' ? 'no' : 'yes'
      )
    },
    // 关闭会场(当前会议)
    async closeMeeting() {
      this.isSingleTalk = false
      const meeting = this.currentMeeting
      meeting.memberLength = 0
      sessionStorage.setItem('meetingStarted-' + meeting.meetID, false)
      if (meeting.meetMode === 'video') {
        this.$nextTick(() => {
          this.$refs.tree.updateKeyChildren('meetingvideoroot', [])
          const keys = this.$refs.tree.getCheckedKeys(true)
          keys.forEach((key) => this.$refs.tree.setChecked(key, false))
        })
        await SDK.meetKick(meeting.meetID).then((res) => {
          var ref = this.$refs['video-plate']
          if (ref) ref.closeMeeting()
        })
      } else {
        await SDK.meetKick(meeting.meetID).then((res) => {})
      }
    },
    // 删除会议按钮
    async deleteMeeting(meeting) {
      let index
      if (
        (index = this.meetingList.findIndex(
          (item) => item.meetID === meeting.meetID
        )) !== -1
      ) {
        this.$delete(this.meetingList, index)
        if (meeting.meetID === this.currentMeeting.meetID) {
          await this.closeMeeting() // 关闭会议
          if (this.meetingList.length > 0) {
            this.selectMeeting(this.meetingList[0])
          } else {
            sessionStorage.removeItem('currentMeeting')
          }
        }
      }
      SDK.delMeet(meeting.meetID)
    },
    // 选中会议
    async selectMeeting(meeting) {
      if (meeting === this.currentMeeting) {
        return
      }
      this.currentMeetingMembers = []
      sessionStorage.setItem('currentMeeting', JSON.stringify(meeting))
      this.currentMeeting = meeting
      this.title = meeting.meetMode === 'video' ? '视频会商' : '语音会议'
      this.treeGroup()

      this.getMeetingMember(meeting.meetID)
    },
    // 会议列表左右移动
    offset(direction) {
      var scroll_div = document.getElementById('scroll_div')
      if (direction === 'left') {
        scroll_div.scrollLeft -= 266
      } else {
        scroll_div.scrollLeft += 266
      }
    },
    // 显示或隐藏会议列表
    handleCollapse() {
      this.showMeetingList = !this.showMeetingList
    },
    // 加载树节点
    treeGroup() {
      if (!this.currentMeeting) return
      if (this.currentMeeting.meetMode === 'video') {
        this.treeData[0].children = this.videoTreeData
        //   // 混码区勾选
        this.$nextTick(() => {
          const mixStr = sessionStorage.getItem(
            `meetingMixSources-${this.currentMeeting.meetID}`
          )
          if (mixStr) {
            const mix = JSON.parse(mixStr)
            const mixSrc = mix.sources
            mixSrc.forEach((src) => this.$refs.tree.setChecked(src.nid, true))
          }
        })
      }
    },
    // 节点选中状态改变
    nodeCheckChange(data, checkedObject) {
      if (this.isSingleTalk) {
        this.msgError('正在单独通话')
        this.$refs.tree.setChecked(data, false)
        return
      }
      if (data.type === 'video' && data.obj.status === 'st_leave') {
        this.msgError('不能播放离线摄像头')
        this.$refs.tree.setChecked(data, false)
        return
      }
      let checked = checkedObject.checkedKeys.includes(data.nid)
      if (
        checked &&
        sessionStorage.getItem(
          'meetingStarted-' + this.currentMeeting.meetID
        ) !== 'true'
      ) {
        this.msgError('请先发起会议')
        this.$refs.tree.setChecked(data, false)
        return
      }
      if (data.type === 'video' && data.obj.videoMode === '0') {
        this.$refs.tree.setChecked(data, false)
        return this.msgError('不支持的摄像头类型')
      }

      if (checkedObject.checkedKeys.length <= 9) {
        var ref = this.$refs['video-plate']
        if (ref) {
          ref.checkMixVideo(data, checked)
        }
      } else {
        console.log('最多只能混码9屏', checkedObject.checkedKeys)
        this.$refs.tree.setChecked(data, false)
        this.msgError('最多只能混码9屏')
      }
    },

    // 失败消息
    msgError(msg) {
      this.$message({
        message: msg || '操作失败',
        type: 'error',
        showClose: true,
        duration: 3 * 1000,
      })
    },
    // 成功消息
    msgSuccess(msg) {
      this.$message({
        message: msg || '操作成功',
        type: 'success',
        showClose: true,
        duration: 3 * 1000,
      })
    },
    // 初始化数据
    async init() {
      SDK.setEvent(this.event)
      let meetingList = await SDK.getMeetingList().then((res) => {
        return res.meet_list.filter((item) => item.meetMode !== 'monitor')
      })
      // 当前会议
      let currentMeeting =
        this.currentMeeting ||
        JSON.parse(sessionStorage.getItem('currentMeeting'))
      let currentMeetingMembers = []
      // 获取会议人数和成员
      for (let i = 0; i < meetingList.length; i++) {
        let item = meetingList[i]
        item.ownName = this.operatorInfo ? this.operatorInfo.realName : ''
        let members = await SDK.getMeetingMember(item.meetID).then((res) => {
          return res.meet_list || []
        })
        item.memberLength = members.length
        if (
          (currentMeeting && currentMeeting.meetID === item.meetID) ||
          (!currentMeeting && i === 0)
        ) {
          currentMeeting = item
          currentMeetingMembers = members
        }
      }
      this.title = currentMeeting.meetMode === 'video' ? '视频会商' : '语音会议'
      this.total = meetingList.length // 会议总数
      this.meetingList = meetingList // 会议列表
      this.currentMeeting = currentMeeting // 当前会议
      sessionStorage.setItem('currentMeeting', JSON.stringify(currentMeeting))
      this.currentMeetingMembers = currentMeetingMembers // 会议成员
      this.treeGroup() // 加载树
      // 对成员进行处理
      this.isSingleTalk = false // 是否进行单独通话

      console.log(
        'init currentMeetingMembers',
        this.currentMeetingMembers.length
      )

      let meetingStart =
        sessionStorage.getItem(
          'meetingStarted-' + this.currentMeeting.meetID
        ) === 'true'
      console.error('meetingStart', meetingStart)
      let isFirst = meetingStart ? false : true
      console.error('isFirst', isFirst)

      this.currentMeetingMembers.forEach((user) => {
        let info =
          this.telOperatorMap.get(user.activeDevice) ||
          this.telEmployeeMap.get(user.activeDevice)
        if (info) {
          user.groupName = this.getGroupName(info)
          user.realName = info.realName
        } else {
          user.groupName = ''
          user.realName = user.userName || user.user || ''
        }
        if (user.userStatus === 'singletalk') this.isSingleTalk = true
        if (
          this.currentMeetingMembers.length > 0 &&
          currentMeeting.meetMode === 'video'
        ) {
          sessionStorage.setItem(
            'meetingStarted-' + this.currentMeeting.meetID,
            true
          )
        }

        if (this.currentMeeting.meetMode === 'video') {
          this.$nextTick(() => {
            if (!this.$refs.tree.getNode(user.activeDevice)) {
              // 用于判断是否是视频话机，结果事件有rtsp流时，认为是视频话机
              this.dealUserVideoUrl(user, info, isFirst, isFirst)
              console.log('nextTick dealUserVideoUrl ')
            }
          })
        }
      })

      if (this.currentMeeting.meetMode === 'video') {
        if (this.currentMeetingMembers.length > 0) {
          this.$nextTick(() => {
            console.log('nextTick video-plate ')
            this.$refs['video-plate'].initData(this.currentMeetingMembers)
          })
        } else {
          this.closeMeeting()
          return
        }
      }

      // 进入页面时，缓存数据播放
      if (this.currentMeeting && this.currentMeeting.meetMode === 'video')
        return

      if (sessionStorage.getItem('meet_linked_video_play_data')) {
        let playData = JSON.parse(
          sessionStorage.getItem('meet_linked_video_play_data')
        )
        if (playData.playList && playData.playList.length > 0) {
          this.camaraBoxData = playData.camaras
          this.camaraBoxPlayingData = playData.playList
          this.showCamaraBox = true
        } else {
          this.$store.commit('MeetPlayData', null)
          this.showCamaraBox = false
          this.camaraBoxData = []
        }
      } else {
        this.showCamaraBox = false
      }
    },
  },
  components: {
    MeetingForm,
    Dial,
    Contact,
    VideoPlateWebrtc,
    BroadcastForm,
    CamaraBox,
    Distribution,
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/meeting.scss';
</style>

<style lang="scss" >
@import '~@/assets/scss/meeting_propper.scss';
</style>


